<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            height: 200px;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <img lazyload="true" data-origin="https://res.52yyxk.com/pcwallpaper_ugc/static/97924126422b5f2df89f3c48ce6cf122.jpg" alt="">
    <img lazyload="true" data-origin="https://www.bizhigq.com/pc-img/2023-07/g4635.jpg" alt="">
    <img lazyload="true" data-origin="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d2a51ba5fa1e5cd0d5266393fb121407.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" alt="">
    <img lazyload="true" data-origin="https://img.shetu66.com/2024/03/20/171094479665814148.png" alt="">
    <img lazyload="true" data-origin="https://res.52yyxk.com/pcwallpaper_ugc/static/97924126422b5f2df89f3c48ce6cf122.jpg" alt="">
    <img lazyload="true" data-origin="https://www.bizhigq.com/pc-img/2023-07/g4635.jpg" alt="">
    <img lazyload="true" data-origin="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d2a51ba5fa1e5cd0d5266393fb121407.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" alt="">
    <img lazyload="true" data-origin="https://img.shetu66.com/2024/03/20/171094479665814148.png" alt="">
    <img lazyload="true" data-origin="https://res.52yyxk.com/pcwallpaper_ugc/static/97924126422b5f2df89f3c48ce6cf122.jpg" alt="">
    <img lazyload="true" data-origin="https://www.bizhigq.com/pc-img/2023-07/g4635.jpg" alt="">
    <img lazyload="true" data-origin="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d2a51ba5fa1e5cd0d5266393fb121407.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" alt="">
    <img lazyload="true" data-origin="https://img.shetu66.com/2024/03/20/171094479665814148.png" alt="">
    <img lazyload="true" data-origin="https://res.52yyxk.com/pcwallpaper_ugc/static/97924126422b5f2df89f3c48ce6cf122.jpg" alt="">
    <img lazyload="true" data-origin="https://www.bizhigq.com/pc-img/2023-07/g4635.jpg" alt="">
    <img lazyload="true" data-origin="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d2a51ba5fa1e5cd0d5266393fb121407.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_640%2ch_1138" alt="">
    <img lazyload="true" data-origin="https://img.shetu66.com/2024/03/20/171094479665814148.png" alt="">

    <script>
        const viewHeight = window.innerHeight

        function lazyLoad(){
            const imgs = document.querySelectorAll('img[data-origin][lazyload]')
            imgs.forEach(img => {
                const rect = img.getBoundingClientRect()
                if(rect.top<viewHeight && rect.bottom>0){
                    const url =img.dataset.origin;
                    img.src = url;
                    img.removeAttribute('lazyload')
                }
            })
        }
        lazyLoad()
        window.addEventListener('scroll',lazyLoad)

    </script>
</body>
</html>